<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-10 17:36:47
-->
<template>
  <div ref="bottom3_container" style="height:95%"></div>
</template>
<script>
import { Rose } from "@antv/g2plot";
export default {
  data() {
    return {
      dataArr: [
        { type: "山东", value: 27 },
        { type: "河南", value: 25 },
        { type: "陕西", value: 18 },
        { type: "河北", value: 15 },
        { type: "内蒙古", value: 10 },
        { type: "其他", value: 5 },
      ],
    };
  },

  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const rosePlot = new Rose(this.$refs.bottom3_container, {
        data:this.dataArr,
        xField: "type",
        yField: "value",
        seriesField: "type",
        // radius: 0.9,
        // legend: {
        //   position: "bottom",
        // },
      });
      rosePlot.render();
    },
  },
};
</script>